import React, { Component } from 'react';
// 引入默认值
import { defaultValue } from "./js/defaultValue";
// 需要自己添加的样式
import styles from "./css/EditEditQuillComponent.module.css";
import "./css/EditEditQuillComponent.css";
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
const config = {
    theme: 'snow',
    defaultValue,
    scrollingContainer: '#Edit',
    modules: {
        toolbar: [
            ['bold', 'italic', 'underline', 'strike'],        // 切换按钮
            ['blockquote', 'code-block'],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }],      // 上标/下标
            [{ 'indent': '-1' }, { 'indent': '+1' }],          // 减少缩进/缩进
            [{ 'direction': 'rtl' }],                         // 文本下划线
            [{ 'size': ['small', false, 'large', 'huge'] }],  // 用户自定义下拉
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'color': [] }, { 'background': [] }],          // 主题默认下拉，使用主题提供的值
            [{ 'font': [] }],
            [{ 'align': [] }],
            ['image', 'video'],
            ['clean']
        ]
    }
}

class EditEditQuillComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    changeEle = (str) => {
        console.log('str', str);
    }

    render() {
        return (
            <div id="EditDraftEditorComponents">
                <p>图片是base64，没有table</p>
                <ReactQuill
                    className={styles.EditorComponents}
                    theme={config.theme}
                    defaultValue={config.defaultValue}
                    modules={config.modules}
                    onChange={(str) => this.changeEle(str)}
                >
                </ReactQuill>
            </div>
        );
    }
}

export default EditEditQuillComponent;